<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>slot插槽的使用  目的是  扩展性</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cpn><button type="button">按钮</button></cpn><!-- 然后我们在这里插入内容 -->
			<cpn><span>wo </span></cpn>
			<cpn><a href="#">超链接</a></cpn><!-- 需求：现在我想在每一个组件中添加不同的东西  如果我们在组件中添加  则每一个组件都有   所以为了解决这个问题 我们使用slot插槽-->
		<!-- 这里要改哪一个插槽 我们就用哪一个插槽 比如我们把中间的值改为标题-->
			<cpn><span slot="center">标题</span></cpn>
		</div>
		<!-- 定义一个组件 -->
		<template id="cp">
			<div id="">
				<h2>我是谢应鹏</h2>
				<slot></slot><!-- 我们只需要在这里添加插槽就行  也可以添加默认的值 比如添加一个button按钮-->
				<slot name="left"><span>左边</span></slot>
				<slot name="center"><span>中间</span></slot>
				<slot name="right"><span>右边</span></slot>
				<!-- 具名插槽
			有时候可能有相同的标签  但是我们只需要改其中一个  此时我们要给插槽起一个名字 -->
			</div>
		</template>
		<script type="text/javascript">
		/* 
		 具名插槽
			有时候可能有相同的标签  但是我们只需要改其中一个  此时我们要给插槽起一个名字
		 */
			var spp = new Vue({
				el:'#app',
				data:{
					
				},
				components:{//注册组件
					cpn:{
						template:'#cp',
					}
				}
			});
		</script>
	</body>
</html>
